Koyaka

Selection Control

Basic Selection Control


    <label class="selection-control my-2">
        <input class="radio info" type="radio" name="a" />
        <div class="flex flex-col gap-1">
            <p class="text-base font-medium">Enable notifications</p>
            <p class="text-muted-foreground text-sm">
                You can enable or disable notifications at any time.
            </p>
        </div>
    </label>

    <label class="selection-control my-2">
        <input class="checkbox info" type="checkbox" name="a" />
        <div class="flex flex-col gap-1">
            <p class="text-base font-medium">Enable notifications</p>
            <p class="text-muted-foreground text-sm">
                You can enable or disable notifications at any time.
            </p>
        </div>
    </label>

    <label class="selection-control my-2">
        <input class="switch info" type="checkbox" name="a" />
        <div class="flex flex-col gap-1">
            <p class="text-base font-medium">Enable notifications</p>
            <p class="text-muted-foreground text-sm">
                You can enable or disable notifications at any time.
            </p>
        </div>
    </label>